<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="form" label-width="100px" :inline="true">
      <el-form-item label="流程名称">
        <el-input v-model="queryParams.processName" placeholder="请输入流程名称" size="small" clearable/>
      </el-form-item>
      <el-form-item style="margin-left: 10px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button style="margin-left: 10px" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="todoTaskList" v-loading="loading" highlight-current-row>
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="流程名称" align="center" prop="processName" :show-overflow-tooltip="true"/>
      <el-table-column label="任务名称" align="center" prop="currentNodeName" :show-overflow-tooltip="true"/>
     <el-table-column label="到达时间" align="center" prop="startTime" :show-overflow-tooltip="true"/>
      <el-table-column label="处理人" align="center" prop="userName" :show-overflow-tooltip="true"/>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" @click="handleTask(scope.row)" size="mini" icon="el-icon-s-check">办理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
            v-show="total>0"
            :total="total"
            :page.sync="pageParams.page"
            :limit.sync="pageParams.rows"
            @pagination="getList"
    />
    <!-- 待办 -->
    <el-dialog :title="title" v-if="open" :visible.sync="open" width="800px" append-to-body>
      <task ref="task" :link="link" :businessId="businessId" :processParams="processParams"
            @submitVerify="submitVerify" @closeForm="closeForm"></task>
    </el-dialog>
    <!-- 伪待办 -->
    <el-dialog :title="fakeTitle" v-if="openFake" :visible.sync="openFake" width="1300px" append-to-body>
      <fake-task :link="link" :fakeTaskParams="fakeTaskParams" @closeFake="closeFake"/>
    </el-dialog>
  </div>
</template>

<script>
  import {taskPending} from "@/api/workflow/workFlow"
  import task from "@/views/workflow/form/task";
  import fakeTask from "@/views/workflow/form/fakeTask";

  export default {
    components: {
      task,
      fakeTask
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 待办开关
        open: false,
        // 伪待办开关
        openFake: false,
        // 待办标题
        title: '',
        // 伪待办标题
        fakeTitle: '',
        // 伪待办组件
        component: null,
        // 业务表单路径
        link: '',
        // 业务id
        businessId: '',
        // 流程参数
        processParams: {},
        // 伪待办参数
         fakeTaskParams: {},
        // 待办信息
        todoTaskList: [],
        total: 0,
        // 分页参数
        pageParams: {
          page: 1,
          rows: 10
        },
        // 查询参数
        queryParams: {
          // 0：待办，1：已办
          todoTaskStatus: '0'
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 查询
      getList() {
        this.loading = true
        taskPending({
          'pageParameter': this.pageParams,
          'searchParams': this.queryParams
        }).then(response => {
          this.todoTaskList = response.responseBody.result;
          this.total = response.responseBody.pageParameter.totalCount;
        }).finally(() => {
          this.loading = false
        })
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },

      reset () {
        this.queryParams = {
          // 0：待办，1：已办
          todoTaskStatus: '0'
        }
        this.getList()
      },

      // 办理
      handleTask(row) {
        // 0：伪待办，1：待办
        if(row.isFake === '0') {
          this.fakeTitle = row.currentNodeName
          this.link = row.link
          this.fakeTaskParams = {
            taskId: row.taskId,
            startTime: row.startTime
          }
          this.openFake = true
        }else {
          // 业务表里路径
          this.link = row.link
          // 业务id
          this.businessId = row.businessId
          // 流程参数
          this.processParams.taskId = row.taskId
          this.processParams.processId = row.processId
          this.processParams.processName = row.processName
          this.processParams.docUnid = row.docUnid
          this.processParams.currentNodeId = row.currentNodeId
          this.processParams.currentNodeName = row.currentNodeName
          this.processParams.startTime = row.startTime
          this.processParams.link = row.link
          this.processParams.businessId = row.businessId
          this.open = true
        }
      },

      closeForm() {
        this.open = false
        this.getList()
      },
      submitVerify() {
        this.open = false
        this.getList()
      },

      // 回调
      closeFake() {
        this.openFake = false
        this.getList()
      },

    }
  }
</script>
